<template>
    <div>
        <div class="flex flexBetween whiteBg searchLayout alignCenter">
            <!-- <van-field
                v-model="fieldValue"
                is-link
                readonly
                label="季节/品牌"
                placeholder="请选择季节及品牌"
                @click="show = true"
            /> -->
            <div @click="show = true"><span class="color999">产品线</span>  <span class="mr10 ml10" :class="{'color999':fieldValue==''}">{{fieldValue?fieldValue:'请选择产品线'}}</span><span class="u-arrow up"></span></div>
            <div class="lineDown"></div>
            <div class="flex" @click="goBuild('add')"><img src="../../assets/image/addNo.png" style="width:0.5rem;height:0.5rem"/></div>
        </div>
        <div class="listLayout">
            <van-list
            v-if="list.length>0"
                v-model="loading"
                :finished="finished"
                :finished-text="finishedTxt"
                :immediate-check='false'
                offset=20
                @load="goPullup"
                class="vantList"
            >
                <div class="wd50 whiteBg" v-for="(item,index) in list" :key="index">
                    <div class="center" style="padding-top:0.4rem">
                        <van-image width='120' height="140"  @click.stop="goShowImg(item.attachment)" lazy-load fit='cover' :src="item.attachment"></van-image>
                    </div>
                    <div  @click="goBuild('edit',item)">
                        <ul class="color999">
                            <li>主题  <span class="color333">{{item.subject_name}}</span></li>
                            <li>设计师  <span class="color333">{{item.subject_sj_name}}</span></li>
                            <li>款号  <span class="color333">{{item.fas_number}}</span></li>
                            <li>款类  <span class="color333">{{item.fas_type_name}}</span></li>
                            <li>采购类型  <span class="color333">{{item.purchase_type}}</span></li>
                            <li v-if="item.supp_sort_name">供应商  <span class="color333">{{item.supp_sort_name}}</span></li>
                        </ul>
                    </div>
                </div>
            </van-list>            
        </div>
        <div  v-if="list.length==0"><van-empty image="search" description="暂无数据" /></div>
        <van-popup v-model="show" round position="bottom">
            <van-cascader
                v-model="cascaderValue"
                title="请选择产品线"
                :options="productLine"
                @close="show = false"
                @finish="onFinish"
            />
        </van-popup>
        <van-popup v-model="isBox" class="buildBox">
            <img src="../../assets/image/close.png" class="disInline closeIcon"   @click="goOperation('close')" />
            
            <div class="center fontSize18 color999" style="padding: 0.6rem 0 0.2rem 0;">{{isEdit?"编辑":"新增"}}款式基本信息</div>
            <div style="padding:0.4rem">
                <div class="flex alignCenter mb20" @click="goShowPiker(1)">
                    <div class="color999 parm"><span class="colorRed">*</span>主题</div>
                    <div class="ml20 selectSty flex flexBetween" :class="{'color999':isEdit}">{{subjectVal?subjectVal:'请选择主题'}} <span class="u-arrow up"></span></div>
                </div>
                <div class="flex alignCenter mb20" @click="goShowPiker(2)">
                    <div class="color999 parm"><span class="colorRed">*</span>设计师</div>
                    <div class="ml20 selectSty flex flexBetween" :class="{'color999':isEdit}">{{designerVal?designerVal:'请选择设计师'}} <span class="u-arrow up"></span></div>
                </div>
                <div class="flex alignCenter mb20" @click="goShowPiker(3)">
                    <div class="color999 parm"><span class="colorRed">*</span>款类</div>
                    <div class="ml20 selectSty flex flexBetween" :class="{'color999':isEdit}">{{fastTypeVal?fastTypeVal:'请选择款类'}} <span class="u-arrow up"></span></div>
                </div>
                <div class="flex alignCenter mb20" @click="goShowPiker(4)">
                    <div class="color999 parm"><span class="colorRed">*</span>采购类型</div>
                    <div class="ml20 selectSty flex flexBetween" :class="{'color999':isEdit}">{{purchaseVal?purchaseVal:'请选择采购类型'}} <span class="u-arrow up"></span></div>
                </div>
                <div class="flex alignCenter mb20" @click="goShowPiker(5)" v-if="purchaseId==2">
                    <div class="color999 parm"><span class="colorRed">*</span>供应商</div>
                    <div class="ml20 selectSty flex flexBetween" :class="{'color999':isEdit}">{{subjectSupplierVal?subjectSupplierVal:'请选择供应商'}} <span class="u-arrow up"></span></div>
                </div>
                <div class="flex alignCenter">
                    <span class="color999 parm">上传图片</span>
                    <van-uploader class="ml20" v-model="fileList" accept='image/*' @delete='deleteImg' :after-read="changeUpload" max-count=1 multiple />
                </div>
            </div>
            <div class="flex flexCenter btnSty">
                <div class="sameBtn center mr10 ml10 color999 cancelBtn" @click="goOperation('close')">取消</div>
                <div class="sameBtn center mr10 ml10 adoptBtn colorfff" @click="goOperation('save')">保存</div>
            </div>
        </van-popup>
        <van-popup v-model="isPiker" round position="bottom">
            <van-picker
                :title="boxTitle"
                show-toolbar
                :value-key="keyname"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
            />
        </van-popup>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog } from 'vant';
import {GetQueryStr} from '@/common/common'

export default{
    name:'buildNo',
    data(){
        return{
            loading:true,
            finished:false,
            finishedTxt:'没有更多了',
            list:[],
            isBox:false,
            show: false,
            isPiker:false,
            fieldValue: '',
            cascaderValue: '',
            // 选项列表，children 代表子选项，支持多级嵌套
            productLine:[],
            keyname:'',
            boxTitle:'',
            // fieldNames: {
            //     text: 'sj_year',
            //     value: 'code',
            //     children: 'items',
            // },
            options: [
                {
                    text: '23春夏',
                    value: '330000',
                    children: [{ text: '歌力思', value: '330100' }],
                },
                {
                    text: '23秋冬',
                    value: '320000',
                    children: [{ text: '歌力思', value: '320100' }],
                },
            ],
            
            value1: 0,
            value2: 'a',
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
            fileList:[],
            fileVal:'',
            uploadUrl:[],
            // columns: ['basic', '甜梦时光', '迷你时代', '配饰组', '幻影滤镜', '胶囊系列'],
            columns:[],
            isEdit:false,
            subjectInfo:{},
            purchaseList:[//采购类型
                {id:1,name:'自制'},
                {id:2,name:'外购'}
            ],
            designerList:[],//设计师列表
            type:1,
            subjectVal:'',//主题
            subject_id:'',//主题id
            designerVal:'',//设计师
            subject_sj_user:'',//设计师id
            fastTypeVal:'',//款类
            fas_type_id:'',//款类id
            purchaseVal:'',//采购类型
            purchaseId:'',//采购id
            subjectSupplierVal:'',//供应商
            supp_id:'',//供应商id
            attachment:'',//图片地址
            page:1,
            sjYearId:'',//产品线年份编号
            comp_id:'',//品牌编号
            id:''
        }
    },
    created(){
         let requestId=GetQueryStr('requestId')
        let loid=localStorage.getItem('requestId')
        if(loid===null){//第一次进
            console.log('loid=====为Null')
            
            // localStorage.removeItem('activeMonth')
            localStorage.removeItem('fieldValue')
            localStorage.removeItem('sjYearId')
            localStorage.removeItem('cascaderValue')
            this.page=1
        }else{//不是第一次进
            // if(loid != requestId){ //若和第一次进的一样 
            //     console.log('清掉')
            //     localStorage.removeItem('activeDate')
            //     localStorage.setItem('requestId',requestId)
            //     // localStorage.removeItem('activeMonth')
            //     localStorage.removeItem('activeNav')
            //     localStorage.removeItem('activeAllDate')
            //     this.activeNav=1
            // }
            if(loid != requestId){
                localStorage.removeItem('fieldValue')
                localStorage.removeItem('sjYearId')
                localStorage.removeItem('cascaderValue')
            }
        }
        localStorage.setItem('requestId',requestId)

        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }else{
            console.log('没有token')
        }
        let fieldValue=localStorage.getItem('fieldValue')
        if(fieldValue&&fieldValue!==''){
            this.fieldValue=fieldValue
        }
        let cascaderValue=localStorage.getItem('cascaderValue')
        if(cascaderValue&&cascaderValue!==''){
            this.sjYearId=localStorage.getItem('sjYearId')
            this.comp_id=cascaderValue
            this.cascaderValue=cascaderValue
            this.getMyFasDataList()
        }
        // this.cascaderValue='330100'
        this.getProductline()
    },
    methods:{
        getMyFasDataList(){
            let obj={
                sj_year:this.sjYearId,
                comp_id:this.comp_id,
                page:this.page
            }
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            console.log('obj列表参数',obj)
            this.$apiRequest.getMyFasDataList(obj).then(res=>{
                console.log('列表',res)
                this.loading = false
                let list=res.data.data
                Toast.clear()
                if(list.length===0){
                  this.page==1?this.list=[]:''
                  this.page==1?this.finishedTxt='':''
                  this.finished=true
                  return 
                }
                if(this.page==1){
                    this.list=list
                    this.finishedTxt=''
                }else{
                    this.list=this.list.concat(list)
                }
            })
        },
        getProductline(){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            let newArr=[]
            this.$apiRequest.getProductline({}).then(res=>{
                console.log('产品线',res)
                if(res.code==1){
                    let data=res.data.subjectInfo
                    data.subjectYearList.map((i,c)=>{//年
                        let obj={}
                        data.subjectCompList.map((e,v) =>{//品牌
                            if(i.sj_year==e.sj_year){
                                let childObj={
                                    value:e.comp_id,
                                    text:e.comp_name,
                                }
                                let child=[]
                                child.push(childObj)
                                obj={
                                    value:i.sj_year,
                                    text:i.sj_yearname,
                                    children:child
                                }
                            }
                        })
                        newArr.push(obj)
                    })
                    this.productLine=newArr //产品线
                    // console.log('newArr',newArr)
                    // console.log('productLine',this.productLine)
                    this.subjectInfo=data
                }else{
                    Toast(res.msg)
                }
                Toast.clear()
                // console.log('productLine',this.productLine)
            })
        },
        goPullup(){//上拉
            console.log('上拉啦啦啦啦')
            this.page++
            this.getMyFasDataList()
        },
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            console.log('selectedOptions',selectedOptions)
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');
            this.sjYearId=selectedOptions[0].value
            this.comp_id=selectedOptions[1].value
            localStorage.setItem('cascaderValue',this.comp_id) //品牌编号
            localStorage.setItem('fieldValue',this.fieldValue)
            localStorage.setItem('sjYearId',this.sjYearId) //年份编号
            this.getMyFasDataList()
        },
        goBuild(type,info){
            type=='add'?this.isEdit=false:this.isEdit=true
            if(this.fieldValue==''){
                Toast('请先选择产品线')
            }else{
                this.isBox=true
            }
            if(type=='edit'){
                console.log('点击编辑',info)
                this.fileList=[]
                this.subjectVal=info.subject_name
                this.subject_id=info.subject_id

                this.designerVal=info.subject_sj_name
                this.subject_sj_user=info.subject_sj_user

                this.fastTypeVal=info.fas_type_name
                this.fas_type_id=info.fas_type_id

                this.purchaseVal=info.purchase_type
                this.subjectSupplierVal=info.supp_sort_name
                this.supp_id=info.supp_id
                // this.fileVal=info.attachment
                this.attachment=info.attachment_source
                this.id=info.id
                let obj={
                    url:info.attachment
                }
                // this.fileList=info.attachment.split(',')
                console.log('this.fileList',this.fileList)
                this.fileList.push(obj)
            }
        },
        deleteImg(img,e){
            this.uploadUrl.splice(e.index,1)
        },
        changeUpload(file){
            console.log('传什么东西',file)
            file.message='上传中'
            file.status='uploading'
            let formData=new FormData()
            formData.append('file',file.file)
            this.$apiRequest.onUpload(formData).then(res=>{
                console.log('上传状态',res)
                if(res.code==1){//成功
                    file.message='上传成功'
                    file.status=''
                    this.uploadUrl.push(res.data.url)
                    let imgUrls=this.uploadUrl.join(',')
                    this.attachment=res.data.url
                    // this.detailInfo.docAttachment=imgUrls
                    console.log('要传的imgUrls',imgUrls)
                }else{
                    file.status='failed'
                    file.message='上传失败'
                }
            })
        },
        onConfirm(value, index) {
            // Toast(`当前值：${value}, 当前索引：${index}`);
            this.isPiker=false
            if(this.type==1){
                // console.log(`选中了，${index}`)
                // this.subjectVal=this.subjectInfo.subjectList[index].subject_name
                // this.subject_id=this.subjectInfo.subjectList[index].subject_id
                this.subjectVal=this.columns[index].subject_name
                this.subject_id=this.columns[index].subject_id
                console.log('subjectVal',this.subjectVal)
                console.log('subject_id',this.subject_id)
                let newArr=[]
                this.subjectInfo.subjectDesignerList.map(i=>{
                    if(i.subject_id==this.subject_id){
                        let obj={
                            subject_sj_name:i.subject_sj_name,
                            subject_sj_user:i.subject_sj_user
                        }
                        newArr.push(obj)
                        
                    }
                })
                this.designerList=newArr
                console.log('设计师列表----',newArr)
            }
            if(this.type==2){//设计师
                this.designerVal=this.columns[index].subject_sj_name
                this.subject_sj_user=this.columns[index].subject_sj_user
            }
            if(this.type==3){//款类
                this.fastTypeVal=this.columns[index].fas_type_name
                this.fas_type_id=this.columns[index].fas_type_id
            }
            if(this.type==4){//采购类型
                this.purchaseVal=this.purchaseList[index].name
                this.purchaseId=this.purchaseList[index].id
                // this.purchase_type=
            }
            if(this.type==5){
                this.subjectSupplierVal=this.subjectInfo.subjectSupplier[index].supp_sort_name
                this.supp_id=this.subjectInfo.subjectSupplier[index].supp_id
            }
        },
        onChange(picker, value, index) {
            // Toast(`当前值：${value}, 当前索引：${index}`);
        },
        onCancel() {
            // Toast('取消');
            this.isPiker=false
            
        },
        goShowPiker(num){
            if(this.isEdit){
                return
            }
            this.type=num
            
            if(num==1){//主题
                this.boxTitle='主题'
                this.keyname='subject_name'
                let newArr=[]
                this.subjectInfo.subjectList.map(i=>{
                    if( (i.sj_year==this.sjYearId)&& (i.comp_id==this.comp_id)){
                        newArr.push(i)
                    }
                })
                this.columns=newArr
            }
            if(num==2){//设计师
                if(this.subjectVal==''){
                    Toast('请先选择主题')
                    return
                }
                this.boxTitle='设计师'
                this.keyname='subject_sj_name'
                this.columns=this.designerList
            }
            if(num==3){//款类
                this.boxTitle='款类'
                this.keyname='fas_type_name'
                let newArr=[]
                this.subjectInfo.subjectCompFasList.map(i=>{
                    if( (i.sj_year==this.sjYearId)&& (i.comp_id==this.comp_id)){
                        newArr.push(i)
                    }
                })
                this.columns=newArr
            }
            if(num==4){//采购类型
                this.boxTitle='采购类型'
                this.keyname='name'
                this.columns=this.purchaseList
            }
            if(num==5){//供应商
                this.boxTitle='供应商'
                this.keyname='supp_sort_name'
                this.columns=this.subjectInfo.subjectSupplier
            }
            this.isPiker=true
        },
        goCloseBox(){
            this.isBox=false
        },
        goOperation(type){
            let that=this
            if(type=='save'){
                if(this.subjectVal==''){
                    Toast('请选择主题')
                    return
                }
                if(this.designerVal==''){
                    Toast('请选择设计师')
                    return
                }
                if(this.fastTypeVal==''){
                    Toast('请选择款类')
                    return
                }
                if(this.purchaseVal==''){
                    Toast('请选择采购类型')
                    return
                }
                if(this.purchaseId==2){
                    if(this.subjectSupplierVal==''){
                        Toast('请选择供应商')
                        return
                    }
                }
                let obj={
                    subject_id:this.subject_id,
                    subject_sj_user:this.subject_sj_user,
                    fas_type_id:this.fas_type_id,
                    purchase_type:this.purchaseVal,
                    supp_id:this.supp_id,
                    attachment:this.attachment
                }
                // console.log('obj11',obj11)
                // let obj={
                //     subject_id:'S231',
                //     subject_sj_user:'ESJ12',
                //     fas_type_id:'T025',
                //     purchase_type:'自制',
                //     supp_id:'S0048',
                //     attachment:this.attachment
                // }
                Toast.loading({
                    message: '提交中',
                    forbidClick: true,
                })
                console.log('obj',obj)

                if(this.isEdit){//编辑
                    obj.id=this.id
                    this.$apiRequest.goEditFas(obj).then(res=>{ 
                        console.log('编辑状态',res)
                        if(res.code==1){
                            Toast.success('提交成功')
                            that.isBox=false
                            that.initData()
                            that.getMyFasDataList()
                        }else{
                            Toast(res.msg)
                        }
                        
                        Toast.clear()
                    })
                }else{
                    this.$apiRequest.goAddFas(obj).then(res=>{ //goEditFas
                        console.log('新增状态',res)
                        if(res.code==1){
                            Toast.success('提交成功')
                            that.isBox=false
                                that.initData()
                                that.getMyFasDataList()
                        }else{
                            Toast(res.msg)
                        }
                        
                        Toast.clear()
                    })
                }
                
            }else{
                this.initData()
                this.isBox=false
            }
            
        },
        goShowImg(url){
            ImagePreview([url])
        },
        initData(){
            this.page=1
            this.finished=false
            this.finishedTxt=''
            this.subjectVal=''
            this.subject_id=''

            this.designerVal=''
            this.subject_sj_user=''

            this.fastTypeVal=''
            this.fas_type_id=''

            this.purchaseVal=''
            this.purchaseId=''

            this.subjectSupplierVal=''
            this.supp_id=''
            this.id=''

            this.fileList=[]
            this.boxTitle=''
        }
    }
}
</script>
<style lang='less' scoped>
.wrapper{
    background-color: #eee;
}
.listLayout{
    // padding: 0.4rem;
    // flex-wrap:wrap;
    width: 90%;
    margin: 0 auto;
    column-count:2;
    -moz-column-count:2; 
    -webkit-column-count:2; 
    // column-gap:0.3rem;
    column-gap: 0.3rem;
    -webkit-column-gap:0.3rem;
    padding: 1.8rem 0 0.4rem 0;
    ul{
        padding: 0.2rem;
        li{
            font-size: 0.26rem;
        }
    }
}
.wd50{
    // width: 50%;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    border-radius: 0.1rem;
    margin-bottom: 0.4rem;
}
.searchLayout{
    padding: 0.4rem;
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    box-shadow: 4px 4px 10px #ccc;
    max-width: 768px;
}
.u-arrow{
    display: inline-block;
    width: 0.18rem;
    height: 0.18rem;
    border-top: 1px #aaa solid;
    border-right: 1px #aaa solid;
    margin-left: 0.1rem;
    position: relative;
    bottom: 0.04rem;
}
.up{
    transform: rotate(135deg);
}
.lineDown{
    height: 0.4rem;
    width: 0.02rem;
    background-color: #ddd;
}
.buildBox{
    width: 90%;
    height: 12rem;
    padding-bottom: 0.4rem;
    border-radius: 0.1rem;
    .closeIcon{
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
        width:0.4rem
    }
    .parm{
        display: inline-block;
        width: 1.4rem;
        text-align: right;
    }
    .selectSty{
        border: 1px #ddd solid;
        width: 4.4rem;
        padding: 0.1rem 0.2rem;
    }
    .u-arrow{
        top: 0.1rem !important;
        bottom: 0;
    }
}
.btnSty{
    // position: fixed;
    // bottom: 0.8rem;
    // left: 50%;
    // transform: translateX(-50%);
    margin-top: 0.8rem;
    .sameBtn{
        width: 2rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border:1px #ddd solid;
        border-radius: 0.1rem;
    }
    .cancelBtn{
        background-color: #eee;
    }
    .adoptBtn{
        background-color: green;
    }
}
</style>
